<template>
  <el-dialog :visible.sync="visible" custom-class="userDialog-wrapper" :before-close="handleClose">
    <slot name="dialog-section"></slot>
    <div slot="title" style="font-size: 20px">
      修改信息
    </div>
    <div slot="footer" class="dialog-footer">
      <el-button class="el-green-button" @click="submitForm" type="primary">保存</el-button>
      <el-button class="el-red-button" @click="handleClose" type="info">取消</el-button>
    </div>
  </el-dialog>
</template>

<script>
export default {
  watch: {
    visibleFlag: function (newValue) {
      this.visible = newValue
    }
  },
  mounted () {
    this.visible = this.visibleFlag
  },
  data () {
    return {
      visible: false
    }
  },
  props: {
    visibleFlag: { type: Boolean, required: true },
    data: { type: Object, required: true },
    apiPath: { type: String }
  },
  methods: {
    handleClose () {
      this.$emit('close-dialog')
    },
    submitForm () {
      this.$emit('submitForm')
    }
  }
}
</script>

<style scoped>
>>>.el-dialog {
  position: relative;
  margin: 0 auto 50px;
  border-radius: 2px;
  box-sizing: border-box;
  width: 30%;
}
</style>
